<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>

  <table border="1">
      <caption>个人信息</caption>
      <tr>
          <td>照片</td>
          <td id="head_td"></td>
      </tr>
      <tr>
          <td>姓名</td>
          <td id="name_td"></td>
      </tr>
      <tr>
          <td>年龄</td>
          <td id="age_td"></td>
      </tr>
      <tr>
          <td>好友</td>
          <td id="friends_td"></td>
      </tr>
  </table>
    <input type="button" value="上传信息" onclick="f()">
</div>
<script>
    function f() {
        let person = {name:"帽帽",age:3,url:"../a.webp",friends:["张三","李四","王五"]}
        let img = document.createElement("img");
        img.src = person.url;
        head_td.append(img);

        name_td.innerText = person.name;

        age_td.innerText = person.age;

        let ul = document.createElement("ul");
        for (let friend of person.friends){
            let li = document.createElement("li");
            li.append(friend);
            ul.append(li);
        }
        friends_td.append(ul);
    }

</script>
</body>
</html>